<template>
	<view class="main">
		<view class="control">
			<view class="ul">
				<view class="li box box-pack-between box-align-center box_radius" v-for="item in snTable" :key="item.id" @click="gotoEquipment(item)">
					<view class="log_img"><image :src="item.avatar ? item.avatar : ''" alt="" /></view>
					<view class="log_text">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="control_button" @click="goToblet">
			<view class="add_button box_radius">添加设备</view>
		</view>
	</view>
</template>

<script>
	
	import {
		getUserInfo,
	} from "@/api/my.js";
	export default {
		data() {
			return {
				snTable: []
			}
		},
		onShow() {
			this.getUserInfos()
		},
		methods:{
			//跳转绑定设备
			goToblet() {
				uni.navigateTo({
					url: '/pages_subpackage/addTablet/index'
				});
			},
			//跳转设备信息
			gotoEquipment(item) {
				uni.navigateTo({
					url: './equipmentInof/index?snid=' + item.id
				})
			},
			//获取用户下的设备
			getUserInfos() {
				getUserInfo({ userId: uni.getStorageSync('userId') }).then(res => {
					this.snTable = res.data.sn
				}).catch(err => {})
			}
			
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style scoped lang="less">
	.main {
	  margin: 10px;
	  .control {
	    image {
	      height: 100%;
	      width: 100%;
	    }
	    .ul {
	      .li {
	        background-color: #e9e9e9;
	        padding: 10px 15px;
	        border-radius: 6px;
	        overflow: hidden;
	        margin-bottom: 10px;
			color: #000000;
	        .log_img {
	          height: 50px;
	          width: 50px;
	          overflow: hidden;
	          border-radius: 50%;
	        }
			.log_text{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 60%;
			}
	      }
	    }
	  }
	  .control_button {
	    background-color: #e9e9e9;
	    border-radius: 6px;
	    overflow: hidden;
	    text-align: center;
	    padding: 23px;
	    margin-top: 20px;
	    font-size: 18px;
	    letter-spacing: 12rpx;
		.add_button{
			color: #4880ff;
		}
	  }
	}
</style>
